<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="utf-8" />
		<!-- 移动设备的支持 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- ie8 标准版的渲染模式 -->
		<meta http-equiv="X-UA-Compatible" content="edge" />
		<title>个人博客-笔记</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/content.css"/>
		<link rel="icon" href="img/面具.ico" type="image/x-icon">
		<link rel="shortcut icon" href="img/面具.ico" type="image/x-icon">
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/content-jq.js" type="text/javascript" charset="utf-8"></script>
	</head>
	

	<body>
	<c:if test="${empty article || empty commentstr }">
		<c:redirect url="index.jsp"></c:redirect>
	</c:if>
		<!-- 导航条 -->
		<div class="head-nav"></div>
		<!-- 导航条结束 -->
		<!-- 题头图片 -->
		<div class="container-fluid">
			<div class="row">
				<div id="img-title" class="col-md-12 hidden-sm hidden-xs" style="padding: 0;">
				<div class="item" >
					<img src="img/QQ图片20200228094541.png" width="100%" height="153.4px"  >
					<div class="titleBox col-sm-5" >
						<ul class="list-unstyled">
							<li>如果你想得到从未拥有过的东西</li>
							<li>那么你必须去做</li>
							<li>从未做过的事情</li>
						</ul>
						<a href="aboutme.html" class=""><img src="http://q1.qlogo.cn/g?b=qq&nk=785001593&s=100" width="100px" class="img-circle" ></a>
					</div>
					
				</div>
				</div>	
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<div class="content-title">
					<div class="btn-group" role="group" >
					  <a href="index.jsp" type="button" class="btn btn-danger btn-sm">首页</a>
					  <a type="button" class="btn btn-danger btn-sm">个人笔记</a>
					</div>
					<p>发布日期：<fmt:formatDate value="${article.createTime}" type="both"/> </p>
				</div>
				</div>
			</div>
			<div class="row" >
				<div class="col-sm-12">
					<!-- 文章主体内容 -->
					<div class="content-boby">
						<div class="small-title">
							<h4 >${article.title}</h4>
							<span>已阅读： 　　${article.consult}</span>
						</div>
						<hr >
						${article.content }
					</div>
					<!-- 文章主体内容结束 -->
			<div class="pinglun" id="app">
				<ul class="nav nav-tabs">
						  <li role="presentation" class="active"><a >评论</a></li>
				</ul>
				<form action="" method="post">
				<div class="p-post">
					<div class="textarea">
						<textarea id="mytext" name="mytext" class="form-control" rows="3" placeholder="写下你想说的话" maxlength="20"></textarea>
					</div>
					<div class="post-footer clearfix " style="padding: 10px;">
						<div class="form-inline">
							<button type="button" @click="commentSubmit" class="pull-right btn btn-warning"
							style="margin-left: 20px;" id="btnIssue" role="button"
							 data-toggle="popover" data-trigger="focus" data-placement="top"
							 data-content="">发布</button>
							<div class="pull-right">
								<input type="tel" name="qqid" class="form-control inputSuccess4 input-sm" id="inputSuccess4" value="" placeholder="输入你的qq号" />
							</div>
							<div class="pull-right" style="margin-right: 10px;">
								<input type="text" name="qqname" class="form-control inputSuccess4 input-sm" id="" value="" placeholder="输入你昵称" maxlength="10"/>
								
							</div>
						</div>
					</div>
				</div>
				</form>
			
				<div class="pl-header">
				  <em>${article.consult}</em>人参与,<em>{{comment.length}}</em>人评论
				</div>
				<!--评论内容-->	
				<div v-if="comment.length<1" class="clearfix text-center" >
					<em style="color: #000000;">暂无评论！</em>
				</div>
				<template v-else>
					 <div v-for="item,index in comment" class="clearfix p-content" >
						<img :src="item.headImg" class="img-circle pull-left" width="50px" height="50px"/>
						<div class="pull-left p-title">
							<span class="p-name" >
								{{item.cauthor}}
							</span>
							<span class="p-time">
								{{item.date | getTimer}}
							</span>
							<div  class="p-text">
								{{item.content}}
							</div>
						</div>
						<div class="pull-right like" @click="likeCount(item)" :myprop="item.cid">
								<span class="glyphicon glyphicon-thumbs-up" ></span>
								<span class="num">{{item.likeNum}}</span>
								<span class="addNum">+1</span>
							</div>
					</div> 
					<!--评论内容结束-->
				</template>
				</div>
				</div>
			</div>
			
		</div>
		
		<!-- 脚注 -->
		<footer class="bs-docs-footer text-center">
		   <span>welcome to 蔡林虎个人博客 蜀ICP备20007904号</span>
		   <br>
		   <span>在人间凑数的时间：<span id="agetime"></span></span>
		</footer>
		<script type="text/javascript">
			var MYCOMMENT=${commentstr};
			const AID=${article.aid};
		</script>
		<script src="js/content-vue.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
